<template>
  <div class="person">
    <h1>情况五：监视上述的多个数据</h1>
    <h2>需求：当水温达到60度，或者水位达到80cm时，给服务器发请求</h2>
    <!--现在我想监视人的名字和第一台车-->
    <h2>当前水温为：{{ temp }}</h2>
    <h2>当前水位为：{{ height }}</h2>
    <button @click="changeTemp">水温升高</button>
    <button @click="changeHeight">水位上升</button>
  </div>
</template>

<script setup name="Person">
import { ref, watch, watchEffect } from "vue";

let temp = ref(10);
let height = ref(0);

function changeTemp() {
  temp.value += 10;
}

function changeHeight() {
  height.value += 10;
}

//监视 -- watch
/*
watch([temp, height], (value) => {
  //现在进行解构赋值，从value中获取最新的水温、水位
  let [newTemp, newHeight] = value;
  if (newTemp >= 60 || newHeight >= 80) {
    //给服务器发请求
    //这里没讲，用console.log()代替
    console.log(1);
  }
});
*/

//监视 -- watchEffect, 这个回调一上来就会执行
/*用法：在watch()监视中，假如 value 解构后有7个部分，则需要监视7个，
但在 watchEffect() 中，你在回调函数中写什么，它就监视什么，不需要额外的声明
*/
watchEffect(() => {
  if (temp.value >= 60 || height.value >= 80) {
    console.log(1);
  }
});
</script>
<style scoped>
.person {
  background-color: #c2e0f6;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>